<template>
  <div class="search-bar">
    <slot/>
    <div class="ml15">
      <el-button type="primary" icon="Search" v-preventDoubleClick @click="search">查 询</el-button>
    </div>
    <div v-if="showMore" class="more">
      <el-button type="primary" link :icon="isOpen ? 'ArrowUp' : 'ArrowDown'" @click="toggle">
        {{ isOpen ? '收起' : '展开' }}
      </el-button>
    </div>
  </div>
</template>

<script setup name="HSearchBar">
const emit = defineEmits()

const props = defineProps({
  showMore: {
    type: Boolean,
    default: false
  }
})
const isOpen = ref(false)

const search = (val) => {
  emit('search')
}
const toggle = (val) => {
  isOpen.value = !isOpen.value
  emit('toggle', isOpen)
}
</script>

<style lang="less" scoped>
.search-bar {
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  background-color: #ffffff;

  &:first-child {
    margin-top: 0;
  }

  :deep(.el-form) {
    margin-bottom: -18px;

    .el-select {
      width: 100%;
    }

    .el-date-editor {
      width: 100%;
    }
  }

  .more {
    height: 33px;
    line-height: 33px;
    margin-left: 10px;
    text-align: center;
  }
}
</style>
